import React, { useEffect } from "react";
import { NavBar, Image } from "antd-mobile";
import { connect } from "react-redux";
import actions from "../store/action";
import "./styles/Store.scss";

function Store(props) {
  let {
    store: { storeList },
    getStoreList,
  } = props;
  useEffect(() => {
    (async () => {
      try {
        if (!storeList) {
          const { data, code } = await getStoreList();
          if (+code === 0) storeList = data;
          console.log(storeList);
        }
      } catch (error) {}
    })();
  }, []);
  return (
    <div className="store-container">
      <NavBar back={null}>我的收藏</NavBar>
      <div className="store-content-list">
        {storeList
          ? storeList.map((item) => {
              const { id, news } = item;

              return (
                <div className="store-item" key={id}>
                  <div className="title">{news.title}</div>
                  <Image src={news.image} lazy />
                </div>
              );
            })
          : null}
      </div>
    </div>
  );
}

export default connect(
  (state) => {
    return {
      store: state.store,
    };
  },
  { ...actions.store }
)(Store);
